<template>
  <div class="login-container">
    <!-- 顶部  -->
    <div class="header">
      <!-- 主题开关 -->
      <el-switch
        style="margin-right: 5px"
        inline-prompt
        v-model="isDark"
        active-icon="Moon"
        inactive-icon="Sunny"
        active-color="var(--el-fill-color-dark)"
        inactive-color="var(--el-color-primary)"
        @click="handleSwitchDark($event)"
      />
      <!-- 语言选择 -->
      <LangSelect class="langSelect" />
    </div>
    <!-- 登录组件 -->
    <Login />
  </div>
</template>

<style scoped>
.dark .login-container {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
}

.login-container {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/login-bg.jpg") no-repeat center right;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 10px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */
.dark::view-transition-old(root) {
  z-index: 1;
}
.dark::view-transition-new(root) {
  z-index: 999;
}

::view-transition-old(root) {
  z-index: 999;
}
::view-transition-new(root) {
  z-index: 1;
}
</style>

<script setup lang="ts">
import LangSelect from "@/components/LangSelect/index.vue"; //语言选择组件
import Login from "@/components/Login/index-side.vue"; //登录组件
import { storeToRefs } from "pinia";
import userStore from "../../store/user.ts";
import { useSettingsStore } from "@/store/modules/settings"; //默认配置
import { ref } from "vue";
import { useToggle } from "@vueuse/core";

const { isSend } = storeToRefs(userStore());
isSend.value = false;

const settingsStore = useSettingsStore();

/**
 * 明亮/暗黑主题切换
 */
const isDark = ref<boolean>(settingsStore.theme === "dark");

//@ts-ignore
const handleThemeChange = (isDark: any) => {
  console.log(isDark);
  useToggle(isDark);
  settingsStore.changeSetting({
    key: "theme",
    value: isDark ? "dark" : "light",
  });
};

// 暗黑主题和明亮主题切换
//@ts-ignore
const handleSwitchDark = async (event: MouseEvent) => {
  //获取鼠标点击位置
  const x = event.clientX;
  const y = event.clientY;
  // 画圆
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );
  // @ts-ignore
  if (document.startViewTransition == undefined) {
    settingsStore.changeSetting({
      key: "theme",
      value: settingsStore.theme === "light" ? "dark" : "light",
    });
  } else {
    // @ts-ignore
    const transition = document.startViewTransition(() => {
      settingsStore.changeSetting({
        key: "theme",
        value: settingsStore.theme === "light" ? "dark" : "light",
      });
    });
    await transition.ready.then(() => {
      const clipPath = [
        `circle(0px at ${x}px ${y}px)`,
        `circle(${endRadius}px at ${x}px ${y}px)`,
      ];
      document.documentElement.animate(
        {
          clipPath:
            settingsStore.theme === "light"
              ? [...clipPath].reverse()
              : clipPath,
        },
        {
          duration: 300,
          easing: "ease-in",
          pseudoElement:
            settingsStore.theme === "light"
              ? "::view-transition-old(root)"
              : "::view-transition-new(root)",
        }
      );
    });
  }
};
</script>
